<template>
  <view class="huangLi_box">
    <view class="holiday_box">
      <view class="holiday_title">
        <view
          class="title_left center"
          style="border-radius: 12rpx 0rpx 0rpx 0rpx"
        >
          今日八字
        </view>
        <view class="box_right">
          <view style="border-bottom: none" class="title_detail center">
            年柱
          </view>
          <view style="border-bottom: none" class="title_detail center">
            月柱
          </view>
          <view
            style="border-bottom: none; border-radius: 0rpx 12rpx 0rpx 0rpx"
            class="title_detail center"
          >
            日柱
          </view>
          <view class="title_detail center">
            {{ getText(dayDetail.year) }}
          </view>
          <view class="title_detail center">
            {{ getText(dayDetail.month) }}
          </view>
          <view class="title_detail center">
            {{ getText(dayDetail.day) }}
          </view>
        </view>
      </view>

      <view class="holiday_title">
        <view class="title_left center"> 相冲 </view>
        <view
          style="border-top: none; border-bottom: none"
          class="title_detail center"
        >
          {{ dayDetail.dayChongDesc }}
        </view>
      </view>

      <view class="holiday_title">
        <view
          class="title_left center"
          style="border-radius: 12rpx 0rpx 0rpx 0rpx"
        >
          今日五行
        </view>
        <view class="box_right">
          <view style="border-bottom: none" class="title_detail center">
            年五行
          </view>
          <view style="border-bottom: none" class="title_detail center">
            月五行
          </view>
          <view style="border-bottom: none" class="title_detail center">
            日五行
          </view>
          <view class="title_detail center">
            {{ getWuXing(dayDetail.year) }}
          </view>
          <view class="title_detail center">
            {{ getWuXing(dayDetail.month) }}
          </view>
          <view class="title_detail center">
            {{ getWuXing(dayDetail.day) }}
          </view>
        </view>
      </view>

      <view class="holiday_title">
        <view class="title_left center"> 值神 </view>
        <view style="border-top: none" class="title_detail center">
          {{ dayDetail.zhiXing }}
        </view>
      </view>
      <view class="holiday_title">
        <view class="title_left center"> 十二食神 </view>
        <view style="border-top: none" class="title_detail center">
          {{ dayDetail.dayTianShen }}
        </view>
      </view>

      <view class="holiday_title">
        <view class="title_left center"> 本日胎神 </view>
        <view class="box_right">
          <view
            class="title_detail center"
            style="border-top: none; border-right: none; flex: 1"
          >
            {{ dayDetail.monthPositionTai }}
          </view>
          <view class="title_left center" style="border-top: none; flex: 1">
            本月胎神
          </view>
          <view class="title_detail center" style="border-top: none; flex: 1">
            {{ dayDetail.dayPositionTai }}
          </view>
        </view>
      </view>
      <view class="holiday_title">
        <view class="title_left center"> 吉神宜趋 </view>
        <view style="border-top: none" class="title_detail center">
          <view
            class="detail_item"
            v-for="(item, i) in dayDetail.dayJiShen"
            :key="i"
            >{{ item }}</view
          >
        </view>
      </view>
      <view class="holiday_title">
        <view class="title_left center"> 凶煞宜趋 </view>
        <view style="border-top: none" class="title_detail center">
          <view
            class="detail_item"
            v-for="(item, i) in dayDetail.dayXiongSha"
            :key="i"
            >{{ item }}</view
          >
        </view>
      </view>

      <view class="holiday_title">
        <view
          class="title_left center"
          style="border-radius: 0rpx 0rpx 0rpx 12rpx"
        >
          彭祖百忌讳
        </view>
        <view
          style="border-top: none; border-radius: 0rpx 0rpx 12rpx 0rpx"
          class="title_detail center"
        >
          {{ dayDetail.pengZu }}
        </view>
      </view>
    </view>
  </view>
</template>
  
  <script>
export default {
  name: "xingBox",
  props: {
    dayDetail: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    getText() {
      return function (item) {
        if (item) {
          //返回前6位
          return item.slice(0, 6);
        }
      };
    },
    getWuXing() {
      return function (item) {
        if (item) {
          //取后3位
          return item.substr(-3);
        }
      };
    },

    getPengZu() {
      return function (item) {
        if (item) {
          //取item的后8位

          return [item.slice(0, 8), item.substr(-8)];
        }
      };
    },
  },
  methods: {
    changeDay(e) {
      this.$emit("changeDate", e === "pre" ? "pre" : "next");
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.huang_middle {
  flex: 1;
  background: #ca4336;
  color: #fff;
  padding: 57rpx 0;
}
.huang_right {
  width: 162rpx;
}
.day_data {
  display: flex;
  justify-content: center;
  font-size: 38rpx;
  color: #ffffff;
  padding-top: 30rpx;
}
.option_box {
  margin-top: 66rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 57rpx;
    height: 84rpx;
  }
  .today_text {
    font-size: 162rpx;
    // font-weight: bold;
    color: #ffffff;
  }
}
.data_yin {
  font-size: 38rpx;
  text-align: center;
  color: #ffffff;
  padding-top: 66rpx;
}
.data_center {
  font-size: 38rpx;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.holiday_title {
  display: flex;
  font-size: 24rpx;
  //   font-weight: bold;
  color: #ffffff;
}
.title_left {
  width: 169rpx;
  // height: 56rpx;
  background: #ca4336;
  border: 1px solid #e5e5e5;
  // border-radius: 12rpx 0rpx 0rpx 0rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.detail_item {
  margin-left: 12rpx;
  flex-shrink: 0;
}
.title_detail {
  flex: 1;
  font-size: 24rpx;
  color: #262626;
  border: 1px solid #ca4336;
  border-left: none;
  display: flex;
  flex-wrap: wrap;
  padding: 12rpx 0;
}
.title_right {
  flex: 1;
  background: #ca4336;
}
.icon-yi {
  width: 46rpx;
  height: 47rpx;
}
.time {
  font-size: 15rpx;
  font-weight: normal;
}

.box_right {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  .title_detail {
    width: 172rpx;
    flex: none;
  }
}
.detail_item {
  margin-left: 12rpx;
}
</style>